<template>
  <div class="lession-page page">
    <div class="chart-box">
      <div id="main" ref="chart" style="width: 100%;height:600px;"></div>
    </div>
  </div>
</template>
           
<script>
import { paymentStatistics, lessionStatistics } from "@/api/user";
export default {
  data() {
    return {
      mychart: null,
      Xios: [],
      dataNum: []
    }
  },
  mounted() {
    this.mychart = this.$echarts.init(document.getElementById('main'));
    this.getData()
  },
  methods: {
    async getData() {
      const res = await lessionStatistics.post();
      if (res.resultCode === "000000") {
        console.log(res);
        const {lessionList, stuCounts} = res.data
        this.Xios = lessionList
        this.dataNum = stuCounts
        this.draw()
      } else {
        this.$message.error(res.resultInfo);
      }
    },
    getOptions() {
      return {
        title: {
          text: '课程情况统计'
        },
        tooltip: {
          trigger: 'axis',
          showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: 50,
          right: 50,
          bottom: 100,
          top:100
        },
        xAxis: {
          data: this.Xios,
          name: '课程'
        },
        yAxis: {
          name: '数量'
        },
        series: this.getSeries()
      }
    },
    getSeries() {
      const seies = {
        name: '课程数量',
        type: 'bar',
        data: this.dataNum,
        barWidth: 50,//柱图宽度
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#800080'
              }
            },
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#f2f5d0'
              // color: '#f2f5d0'
            }, {
              offset: 1,
              color: '#f9957f'
              // color: '#aebaf8'
            }])
          }
        },
      }
      return seies
    },
    draw() {
      this.mychart.setOption(this.getOptions());
    }
  }
}
</script>
<style lang='scss'>
.lession-page{
  width: 100%;
  .chart-box {
    margin-top: 20px
  }
}
</style>